<template>
  <div class="Button" :style="{ ...border, ...background }">
    <div class="t-ellipsis fulled-w">{{ config.text }}</div>
  </div>
</template>

<script>
  import { encodeBackgroundStyle } from '@/utils';
  import borderMixin from '@/mixins/borderMixin';

  export default {
    mixins: [borderMixin],
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      },
      // 背景色
      background() {
        const background = encodeBackgroundStyle(this.config.background);
        if (background.fillType === 2 && background.backgroundImage)
          background.backgroundImage = `url(${this.$staticRes(background.backgroundImage)})`;
        return background;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .Button {
    display: flex;
    align-items: center;
    overflow: hidden;
    letter-spacing: 1px;
  }
</style>
